#{extends 'Admin.html'/}
#{set title:'Admin -> Input Topic' /}

#{set 'moreStyles'}
    <link rel="stylesheet" media="screen" href="@{'/public/javascripts/ext/CLEditor1_3_0/jquery.cleditor.css'}">
#{/set}

#{set 'moreScripts'}
    #{script 'guchi/inputTopic.js' /}
    #{script 'ext/CLEditor1_3_0/jquery.cleditor.min.js' /}
    <script type="text/javascript">
        $(document).ready(function() {
            $("#textarea_desc").cleditor({
                width:'100%',
                controls:     // controls to add to the toolbar
                        "bold italic underline strikethrough subscript superscript | font size " +
                        "style | color highlight removeformat | bullets numbering | outdent " +
                        "indent | alignleft center alignright justify | undo redo | " +
                        "rule image link unlink | cut copy paste pastetext "
            });
        });
    </script>
#{/set}

<h1>&{'admin.inputTopic.title'}</h1>
<div class="adminTitleIntro">&{'admin.inputTopic.title.intro'}</div>

#{form @Admin.saveTopic(), class:"simpleForm", enctype:'multipart/form-data', id:"formTopic"}
    <input type="hidden" value="${topicDto.topicId}" name="topicDto.topicId">

    <p>
        <label> Language : </label>

       <input type="text" value="${lang}" name="topicDto.language" disabled="true">
        <!--#{select 'topicDto.language', items:allLanguages,  id:'select_language_id', value:topicDto.language, labelProperty:"name", valueProperty:"code" /}-->
    </p>


    <p>
        <label> Code : </label> <input type="text" value="${topicDto.code}" name="topicDto.code">
    </p>

    <p>
        <label> Name : </label> <input type="text" value="${topicDto.name}" name="topicDto.name">
    </p>

    <p>
        <label> Title : </label> <input type="text" value="${topicDto.title}" name="topicDto.title">
    </p>

    <p>
        <label> Small photo: </label>
        <img src="@{Admin.getTopicImage(topicDto.topicId, 1)}" alt="">
        <br>
        <label>&nbsp;</label>
        <input type="file" name="topicDto.relatedPhoto">
    </p>

    <p>
        <label> Large photo: </label>
        <img src="@{Admin.getTopicImage(topicDto.topicId, 2)}" alt="">
        <br>
        <label>&nbsp;</label>
        <input type="file" name="topicDto.largePhoto">
    </p>

    <br class="clearfloat">
    <div class="inputTopic_desc">
        <label> Topic desc: </label>
        <br>
        <div style="padding-left: 100px">
            <textarea name="topicDto.desc" id="textarea_desc">${topicDto.desc}</textarea>
        </div>
    </div>
    <br class="clearfloat">

    <div class="input_MoreInfor">
        <label> More information: </label>
        <br/>
        <input type="hidden" name="topicDto.moreInfoAsJson" id="moreInfoAsJson_id" value="${topicDto.moreInfoAsJson}"/>
        <div id="allMoreInfo_id">
            <ul class="moreInfo_header">
                <li> Title </li>
                <li> Link </li>
            </ul>
            #{list items: topicDto.moreInfos, as:'moreInfo' }
                <ul title="${moreInfo.id}" class="ul_moreInfo">
                    <li> ${moreInfo.title} </li>
                    <li> ${moreInfo.link} </li>
                    <li class="moreInfo_btn"> <input type="button" value="Del" onclick="delMoreInfo(this)"> </li>
                </ul>
            #{/list}
        </div>

        <div id="Add_new_row">
            <ul>
                <li> <input type="text"  id="newMoreInfoTitle"> </li>
                <li> <input type="text"  id="newMoreInfoLink"> </li>
                <li  class="moreInfo_btn"> <input type="button" value="Add" id="newMoreInfoAdd" onclick="addMoreInfor()"></li>
            </ul>
        </div>
    </div>
    <br class="clearfloat">

    <div class="input_MoreInfor">
        <label> Related product(s): </label>
        <br>
        <input type="hidden" name="topicDto.relatedTopicsAsJson" id="relatedTopicsAsJson_id" value="${topicDto.relatedTopicsAsJson}"/>
        <div id="allRelatedTopic_id">
            <ul class="moreInfo_header">
                <li> Id </li>
                <li> Code </li>
            </ul>
            #{list items: topicDto.relateds, as:'related' }
                <ul title="${related.topicId}" class="ul_related">
                    <li> ${related.topicId} </li>
                    <li> ${related.code} </li>
                    <li class="moreInfo_btn"> <input type="button" value="Del" onclick="delRelated(this)"> </li>
                </ul>
            #{/list}
        </div>

        <div id="Add_new_related">
            <ul>
                <li>&nbsp;</li>
                <li> #{select 'newRelated', items:allRelatedTopics, valueProperty:'topicId', labelProperty:'code', id:'select_related_id' /} </li>
                <li  class="moreInfo_btn"> <input type="button" value="Add" onclick="addRelated()"></li>
            </ul>
        </div>
    </div>

    <div class="controls">
        <input type="submit" value="Save" />
        <input type="button" value="Cancel" onclick="toListTopic()"/>
    </div>
#{/form}


<script type='text\html' id='moreInfo_tpl'>
    <ul class="ul_moreInfo" title="-1"> <li> #{verbatim}${'${title}'}#{/verbatim} </li>
        <li> #{verbatim}${'${link}'}#{/verbatim} </li>
        <li class="moreInfo_btn"> <input type="button" value="Del" onclick="delMoreInfo(this)"> </li>
    </ul>
</script>

<script type='text\html' id='related_tpl'>
    <ul class="ul_related" title="-1"> <li> #{verbatim}${'${topicId}'}#{/verbatim} </li>
        <li> #{verbatim}${'${code}'}#{/verbatim} </li>
        <li class="moreInfo_btn"> <input type="button" value="Del" onclick="delRelated(this)"> </li>
    </ul>
</script>





